
<template>
  <div style="width: 1200px;margin: 60px auto">
    <div style="width: 690px;">
      <!--上传封面图-->
      <div style="margin: 80px 0 50px 0;">
        <h2>封面图</h2>
        <el-upload
            show-file-list="false"
            class="upload-demo"
            drag
            action="http://localhost:8887/resources/upload/coverImage"
            multiple style="margin-top: 10px"
            :on-success="handleUploadCoverImageSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5M</div>
        </el-upload>



      </div>
      <!--    菜谱名称-->
      <el-input v-model="recipe.title" placeholder="菜谱标题" style="margin: 20px 0"></el-input>
      <!--    简单描述-->
      <el-input
          type="textarea"
          :rows="3"
          placeholder="菜谱背后的故事~"
          v-model="recipe.description"
      style="margin: 20px 0">
      </el-input>
<!--      分割线-->
      <el-divider></el-divider>
<!--      食材清单-->
      <div>
      <h2>食材清单</h2>
      <div style="margin: 10px;width: 690px;background-color:#F1F7FA;border-radius: 10px;padding: 15px">

        <el-row :gutter="20" v-for="(i,index) in ingredientArr" :key="index">
          <el-col :span="15"><div class="grid-content bg-purple">
            <el-input v-model="ingredientArr[index].ingredient" placeholder="请输入食材" style="height: 30px"></el-input>
          </div></el-col>
          <el-col :span="9"><div class="grid-content bg-purple">
            <el-input v-model="ingredientArr[index].amount" placeholder="请输入用量"></el-input>
          </div></el-col>

        </el-row>
        <el-button type="primary" icon="el-icon-plus" circle @click="ingredientArrPush()"></el-button>
        <el-button type="primary" icon="el-icon-minus" circle @click="ingredientArrPop()"></el-button>
      </div>
      </div>
<!--      步骤-->
      <div>
        <h2>制作步骤</h2>
        <div style="margin: 10px;width: 690px;background-color:#F2F2F2;border-radius: 10px;padding: 15px">
          <el-row :gutter="5" v-for="(i,index) in stepArr" :key="index">
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-upload
                  action="http://localhost:8887/resources/upload/stepImage"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :on-success="handleUploadStepImageSuccess"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div></el-col>
            <el-col :span="16"><div class="grid-content bg-purple">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 3}"
                  placeholder="步骤详情"
                  v-model="stepArr[index].content">
              </el-input>
            </div></el-col>
          </el-row>
          <el-button type="primary" icon="el-icon-plus" circle @click="stepArrPush()"></el-button>
          <el-button type="primary" icon="el-icon-minus" circle @click="stepArrPop()"></el-button>
        </div>
      </div>

<!--      上传按钮-->
      <div>
        <el-button type="success" style="margin: 20px auto;text-align: center;padding: 20px 50px;font-size: 20px"
        @click="uploadAll">上传！</el-button>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {

      $:"",
      recipeArr:[],
      textarea:"",
      inNum:4,
      coverImage:"",
      ingredientArr:[
        // {
        //   ingredient:"",amount:""
        // },

      ],
      stepArr:[
      ],
      recipe:{
        authorId:0,
        title:"",
        description:"",
        image: this.coverImage,
        ingredients:"",
        stepImage:[],
        stepContent:[]
      },
      fileList:[],
    }


  },
  methods: {
    handleRemove(file, fileList) {
      fileList.delete(file);
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //添加一个食材输入框
    ingredientArrPush(){
      this.ingredientArr.push({amount: "",ingredient: ""})
    },
    //减少一个食材输入框
    ingredientArrPop(){
      this.ingredientArr.pop();
    },
    //添加一个步骤输入框
    stepArrPush(){
      this.stepArr.push({image: "",content: ""})
    },
    //减少一个步骤输入框
    stepArrPop(){
      this.stepArr.pop();
    },

    //封面上传后
    handleUploadCoverImageSuccess(response){
      this.coverImage=response.data.url
      console.log("hksjnbvjnvkjxcnhzv"+this.coverImage)
      this.recipe.image=this.coverImage;
    },

    // 步骤图片上传成功后的回调，把url传递给image
    handleUploadStepImageSuccess(response,file) {
      this.fileList.push(file);
      const index = this.fileList.indexOf(file);
      this.stepArr[index].image=response.data.url
  },
    //上传所有菜谱数据
    uploadAll(){
      //登录功能后  拿到作者id
      let userId = localStorage.getItem('userId');
      this.recipe.authorId=userId;
      // this.recipe.authorId = JSON.parse(localStorage.getItem('authorId'));
      //菜谱食材
      this.recipe.ingredients="";
      for (let i = 0; i < this.ingredientArr.length; i++) {
        if(i===this.ingredientArr.length-1){
          this.recipe.ingredients+=(this.ingredientArr[i].ingredient+"="+this.ingredientArr[i].amount);
          break;
        }
        this.recipe.ingredients+=(this.ingredientArr[i].ingredient+"="+this.ingredientArr[i].amount+"&");
      }
      //菜谱步骤
      for (let i = 0; i < this.stepArr.length; i++) {
        this.recipe.stepImage.push(this.stepArr[i].image);
      }
      for (let i = 0; i < this.stepArr.length; i++) {
        this.recipe.stepContent.push(this.stepArr[i].content);
      }

      let url = 'http://localhost:8889/recipe/addNewRecipe';
      console.log('url = ' + url);
      console.log("all data 步骤图片: "+this.recipe.stepImage);
      console.log("all data 食材: "+this.recipe.ingredients);
      console.log("all data 步骤内容: "+this.recipe.stepContent);
      console.log("封面: "+this.recipe.image);

      // let formData = this.qs.stringify(data);
      // console.log('formData = ' + formData);


      // 发送提交请求到后台
      let localJwt = localStorage.getItem('loginInfo');
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          }).post(url,this.recipe).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {

        } else {
          this.$alert(jsonResult.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })

    },

  mounted() {


  },
}
}

</script>

<style>
*{margin: 0;
  padding:0}
a:hover{cursor: pointer;
  color: orange;
  text-decoration: none}

.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item,.el-submenu__title{
  padding: 0 15px;
}
.el-button{
  padding: 8px 12px;
}
.el-input__inner{
  height: 30px;
  line-height: 20px;
}


#index_main{margin: 0 auto}
.el-card__body, .el-main{
  padding:0;}
/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyRecipe  .title{font-size: 15px;line-height: 35px}
.dailyRecipe  .author{font-size: 12px;line-height: 13px}
.othersSearch_topic span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}
.othersSearch_topic span:hover{
  color: orange;
  border: orange 1px solid;
}
.el-aside .follow span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}
.el-aside .follow span:hover{
  color: orange;
  border: orange 1px solid;
}
.follow_author{
  font-size: 15px;
}
.follow_fans{
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
element.style {
  padding: 0;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.el-main{
  padding: 0 !important;
}
.el-submenu__title{
  padding: 0 5px !important;
}
.el-dropdown-menu__item, .el-menu-item{
  padding: 0 10px !important;
}

.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
.allRecipe  .title{font-size: 15px;line-height: 35px}
.allRecipe  .author{font-size: 12px;line-height: 13px}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /*background: #99a9bf;*/
}
.bg-purple {
  /*background: #d3dce6;*/
}
.bg-purple-light {
  /*background: #e5e9f2;*/
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  /*background-color: #f9fafc;*/
}
</style>


